<template>
<el-card class="good-container">
    <el-steps :active="activeNum" align-center finish-status="success">
      <el-step :title="item.title" :description="item.description" v-for="item in stepArr" :key="item.title"></el-step>
    </el-steps>
    <div class="tborder"></div>
      <!--订单信息-->
    <div class="orders">
      <div class="order_i">订单编号 {{orderDetail.orderSn}}</div>
      <div class="order_i">下单时间 {{orderDetail.createTimes}}</div>
    </div>
    <el-descriptions  direction="vertical" :column="7" border style="text-align: center;">
        <el-descriptions-item label="商品名称">
          <div style="max-width:400px;">{{orderDetail.productName}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="商品图片"><img class="g_i_img" :src="orderDetail.productImg" alt=""></el-descriptions-item>
        <el-descriptions-item label="商品规格/数量">{{orderDetail.specialName}}*{{orderDetail.specialName}}</el-descriptions-item>
        <el-descriptions-item label="团份数">{{orderDetail.tuanMemberNum}}</el-descriptions-item>
        <el-descriptions-item label="订单总金额">￥{{orderDetail.intTotalPrice/100}}</el-descriptions-item>
        <el-descriptions-item label="买家">{{orderDetail.shipName}}</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">添加备注(仅自己可见)</el-tag>
        </el-descriptions-item>
    </el-descriptions>
     <!--收件人信息-->
     <div class="orders">
      <div class="order_i">收件人信息</div>
      <div class="order_i"> <el-button type="primary" size="mini">更改收货地址</el-button></div>
    </div>
     <div class="o_bor">
        <el-descriptions :column="2" >
          <el-descriptions-item label="收件人姓名：">{{orderDetail.shipName}}</el-descriptions-item>
          <el-descriptions-item label="收件人地区：">{{orderDetail.shipAddress}}</el-descriptions-item>
          <el-descriptions-item label="收件人电话：">{{orderDetail.shipMobile}}</el-descriptions-item>
          <el-descriptions-item label="收件人地址：">{{orderDetail.shipAddress}}</el-descriptions-item>
        </el-descriptions>
     </div>
      <!--团信息-->
    <div class="orders">
      <div class="order_i">拼团信息</div>
      <div class="order_i"></div>
    </div>
      <el-table
      ref="multipleTable"
      :data="tableData"
      border
      :highlight-current-row='true'
      :header-row-style="headStyle"
      style="width: 100%">
      <el-table-column label="序号"  type="index" align="center"></el-table-column>
      <el-table-column label="姓名" prop="memberName" align="center"></el-table-column>
      <el-table-column label="电话" prop="shipMobile" align="center"></el-table-column>
      <el-table-column label="规格/数量" prop="specialValueCount" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center"></el-table-column>
    </el-table>
    <div class="orders">
      <div class="order_i"><span class="order_sapn">(还差1人成团 剩余时间 12:23:34)</span></div>
      <div class="order_i"><el-button type="primary" size="small">一键成团</el-button></div>
    </div>
     <!--填写物流信息-->
     <div class="orders">
      <div class="order_i">物流状态<span class="order_sapn">(等待发货)</span></div>
      <div class="order_i"></div>
    </div>
    <div class="o_bor">
       <el-form label-width="120px" :model="formpt" inline>
             <el-form-item label="物流公司">
                <el-select style="width: 150px;" v-model="formpt.gaValue" placeholder="选择物流公司" @change='ChandleSelecA'>
                  <el-option
                     v-for="item in options" :key="item.id"
                    :value="item.id" :label="item.label" :disabled="item.disabled">
                  </el-option>
                </el-select>
             </el-form-item>
             <el-form-item label="物流单号">
               <el-input style="width: 150px;" v-model="formpt.orderSn" placeholder="请输入物流单号"></el-input>
             </el-form-item>
              <br />
              <el-form-item label="物流费用">￥0.00</el-form-item>
         </el-form>
     </div>
     <!--待收货物流信息-->
     <div class="o_box">
       <div class="o_box_l">
         <div class="o_box_item">物流公司: 顺丰快递</div>
         <div class="o_box_item">物流单号: 513546478458674 <a>更改物流单号</a></div>
         <div class="o_box_item">物流费用: ￥0.00</div>
       </div>
      <div class="o_box_r">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp">
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>
      </div>
     </div>
      <!--申请退款-->
     <div class="orders">
      <div class="order_i">退款记录<span class="order_sapn">(申请退款)</span></div>
      <div class="order_i"><span class="order_sapn">处理进度：等待商家处理退款</span></div>
    </div>
     <div class="o_bor">
        <el-descriptions :column="2" >
          <el-descriptions-item label="退款发起人">王东旭</el-descriptions-item>
          <el-descriptions-item label="退款理由">个人原因</el-descriptions-item>
          <el-descriptions-item label="退款类型">仅退款</el-descriptions-item>
          <el-descriptions-item label="退款说明">不想买了</el-descriptions-item>
          <el-descriptions-item label="退款金额"><span class="order_sapn">￥34.5</span></el-descriptions-item>
          <el-descriptions-item label="申请时间">2015-12-20 12:00:00</el-descriptions-item>
          <el-descriptions-item label="">
            <img class="g_i_img" src="" alt="">
            </el-descriptions-item>
        </el-descriptions>
     </div>
     <div class="o_btn">
         <el-button type="primary">发 货</el-button>
     </div>
 </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import {getData} from '@/utils/axios'
import { useRouter,useRoute } from 'vue-router'
import { store } from '@/store'
export default {
  name: 'OrderDetail',
  setup() {
    const multipleTable = ref(null)
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      busbaseId:store.getters.busId,
      adminId:store.getters.adminId,
      orderSn:'',
      orderDetail:{},
      stepArr:[
        {'title':'用户开团','description':'2021-05-02 12:00:00'},
        {'title':'等待商品成团','description':'2021-05-02 12:00:00'},
        {'title':'等待商家发货','description':'2021-05-02 12:00:00'},
        {'title':'用户确认收货','description':'2021-05-02 12:00:00'},
        {'title':'订单交易完成','description':'2021-05-02 12:00:00'},
      ],
      activeNum:2,
      headStyle:{
         'color':'#000',
         'fontWeight':'550'
      },
      tableData:[
        {name:'张三',phone:'15232145687',guige:'红色玫瑰*1',satte:'已取货'},
        {name:'张三',phone:'15232145687',guige:'红色玫瑰*1',satte:'已取货'},
        {name:'张三',phone:'15232145687',guige:'红色玫瑰*1',satte:'已取货'},
        {name:'张三',phone:'15232145687',guige:'红色玫瑰*1',satte:'已取货'},
        {name:'张三',phone:'15232145687',guige:'红色玫瑰*1',satte:'已取货'},
      ],
      formpt:{
        gaValue:'',
        orderSn:''
      },
      options:[
            {id:'1',label:'红色玫瑰'},
            {id:'2',label:'中通'},
      ],
      activities:[{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        },  {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        },  {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        },  {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        },  {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '默认样式的节点',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }]
    })
    
    onMounted(() => {
      state.orderSn=route.query.id;
      getGoodDetail()
    })
    // 获取轮播图列表
    const getGoodDetail = () => {
      let params={
          adminId:state.adminId,
          busbaseId:state.busbaseId,
          orderSn:state.orderSn
        }
       getData('/order/orderBus/getOrderDetailByBusbaseSn',params).then(res=>{
                console.log(res.data,'订单详情')
                if(res.data.flag){
                  state.orderDetail=res.data.data.orderDetail;
                  state.tableData=res.data.data.tuanMemberList
                }
            }) 
    }
    return {
      ...toRefs(state),
      multipleTable,
      getGoodDetail,
    }
  }
}
</script>

<style scoped>
.tborder{border-top: 1px dashed #ccc;margin-top: 30px;}
.orders{display: flex;align-items: center;justify-content: space-between;width:100%;height: 60px;}
.order_sapn{color: #ff383d;}
.g_i_img{width: 100px;height:100px ;margin-right: 10px;float: left;}
.el-form-item{width: 45%;}
.o_btn{display: flex;align-items: center;justify-content: center;width:100%;height: 80px;}
.o_bor{border:1px solid #ccc;padding:18px 10px 10px 10px;}
.o_box{width: 100%;display: flex;border:1px solid #ccc;}
.o_box_l{width: 400px;min-height: 300px;padding:10px;background: #ddd;}
.o_box_item{font-size: 15px;line-height: 40px;}
.o_box_item a{margin-left: 20px;}
.o_box_r{width:100%;flex:1;padding:10px;}
</style>